/**
 * 图表页面
 */
import React from 'react';
import echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import * as Utils from '../../../common/utils';
import * as ConstData from '../../../common/const';

class EchartPage extends React.Component {
    constructor(props) {
        super(props);
    }

    shouldComponentUpdate(nextProps){
        const propsEqual = Utils.shallowEqual(this.props,nextProps);
        return !propsEqual;
    }

    render() {
        const { title, xName, yName, xData, yData, legendData, formatter } = this.props;
        let statusState = title.indexOf('状态')>=0;
        let maxValue = Utils.GetMaxValue(yData);

        const option = {
            title: {
                text: title,
                left: 'center',
            },
            grid: {
                top:'80',
                left: '10%',//因旋转导致名字太长的类目造成遮蔽，可以配合这两个属性
                bottom:'10%',// 分别表示：距离左边距和底部的距离，具体数值按实际情况调整
            },
            toolbox: {
                show: true,
                right: '9.4%',
                feature: {
                    // myTool : {
                    //     show : true,
                    //     title : '全屏显示',
                    //     icon: 'image://http://echarts.baidu.com/images/favicon.png',
                    //     onclick: function (){
                    //         // debugger;
                    //     }
                    // },
                    magicType: {type: statusState?['line']:['line', 'bar']},
                    restore: {},
                    saveAsImage: {},
                }
            },
            color: ['#53ADFB'],
            legend: {
                selectedMode: false,
                data: legendData?legendData:[],
                align:'left',
                top: 30,
            },
            tooltip: {
                formatter: formatter?formatter:'',
                trigger: 'axis'
            },
            xAxis: {
                name: xName,
                type: 'category',
                boundaryGap: true, //图形两边留白, false则不留白
                data: xData,
                axisLabel: ConstData.AXIS_LABEL,
                axisTick: {
                    // alignWithLabel: true
                }
                // nameTextStyle: {
                //     padding: [ 0, 0, 15, 0]
                // }
            },
            yAxis: {
                name: yName,
                type: 'value',
                minInterval: 1,
                interval: Utils.GetInterval(maxValue),
                max: (value)=> {
                    return maxValue;
                },
                axisLabel: {
                    showMaxLabel: true
                },
                nameTextStyle: {
                    padding: [0, 0, 10, 0]
                },
                splitLine:{
                    lineStyle:{
                        type:'dashed'
                    }
                }
            },
            series: [{
                smooth: true,
                name: legendData?legendData[0]:"",
                data: yData,
                type: 'line',
                symbolSize: 8,
                barWidth: ConstData.STATISTIC_BAR_WIDTH,
                label: {
                    normal: ConstData.LABEL_NORMAL
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#4fc9e7'},
                                {offset: 1, color: '#61B1F8'},
                                {offset: 1, color: '#61B1F8'}
                            ]
                        ),
                    }
                },
                lineStyle: {
                    width: ConstData.STATISTIC_LINE_WIDTH,
                }
            }],
            dataZoom : ConstData.dataZoom(yData)
        }

        return (
            <div>
                <ReactEcharts
                    option={option}
                    style={{ height: 700 , width: '100%'}}
                    // className={'react_for_echarts'}
                    notMerge={true}
                />
            </div>
        )
    }
}

export default EchartPage;